<template>
  <div class="wrapper">
    <router-view>
      <template #default="{ Component }">
        <transition name="fade">
          <!-- 智能缓存控制 -->
          <keep-alive :include="keepAliveRouteNames">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </template>
    </router-view>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRouteCacheStore } from './store';

const routeCacheStore = useRouteCacheStore();
console.log('import.meta.env', import.meta.env);

// 获取需要缓存的组件名列表
const keepAliveRouteNames = computed<any[]>(() => {
  return routeCacheStore.routeCaches;
});
</script>
